<template>
  <div class="list-wrapper">
    <el-empty v-if="tableData.length == 0" description="暂无任何记录" />
    <template v-else>
      <div v-for="(item,index) in tableData" :key="index" class="block d-flex">
        <span class="iconfont icon-plan" :class="getStatus(item).class" />
        <dl>
          <dt>{{ item.name }}（{{ getStatus(item).name }}）</dt>
          <dd>{{ item.val }}</dd>
        </dl>
        <div class="mlauto">
          <el-button size="mini" type="primary" @click="getOne(item)">详情</el-button>
          <el-button size="mini" type="danger" @click="deleteOne(item)">删除</el-button>
          <el-button size="mini" type="warning" @click="cancelOne(item)">取消</el-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    listObj: {
      type: [Object, Array],
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    listObj: {
      handler(newVal, oldVal) {
        this.tableData = this.getTableData()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getTableData() {
      if (this.listObj.data) {
        return this.listObj.data
      }
      return []
    },
    getStatus(item) {
      let res = {
        name: '待执行',
        class: 'color-info'
      }
      if (+item.status === 2) {
        res = {
          name: '执行中',
          class: 'color-primary'
        }
      } else if (+item.status === 3) {
        res = {
          name: '已完成',
          class: 'color-success'
        }
      } else if (+item.status === 4) {
        res = {
          name: '已取消',
          class: 'color-danger'
        }
      }

      return res
    },
    deleteOne(row) {
      this.$confirm('确定要进行此操作吗？', '操作确认', { type: 'warning' }).then(() => {
        this.$emit('deleteOne', row)
      })
    },
    cancelOne(row) {
      this.$confirm('确定要进行此操作吗？', '操作确认', { type: 'warning' }).then(() => {
        this.$emit('cancelOne', row)
      })
    },
    getOne(row) {
      this.$emit('getOne', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.list-wrapper{
  .block{
    display:flex;
    flex-direction: row;
    align-items:center;
    border-bottom:1px solid #f0f0f0;
    padding-top:8px;
    span.iconfont{
      font-size:40px;
      margin-right:12px;
    }
    dl{
      dt{
        font-size:15px;
      }
      dd{
        font-size:12px;
        color:#bbb;
        margin-top:8px;
      }
    }
    div{
      margin-left:auto;
    }
    &:hover{
      div{
        display:inline-block;
      }
    }
  }
}
</style>
